<template>
  <div id="loudong">
    <el-container>
      <el-header id="submit">
        <el-row :gutter="24">
          <el-col :span="24">
            <div class="grid-content bg-purple">
              <el-col :span="18">
                <el-form ref="form" :model="audit">
                  <el-col :span="8">
                    <el-form-item label="姓名：">
                      <el-input placeholder="请输入户主姓名" v-model="audit.floor_xm">
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="楼栋：">
                      <el-select v-model="audit.floor_ld" placeholder="请选择楼栋">
                        <el-option v-for="v in ldDate" :label="v" :value="v" :key="v">{{v}}</el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="单元：">
                      <el-select v-model="audit.floor_dy" placeholder="请选择单元" class="drom">
                        <el-option v-for="(v,i) in dyDate" :label="v" :value="v" :key="i">{{v}}</el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-form>
              </el-col>
              <el-col :span="6">
                <el-button type="primary" @click="onSubmit">查询</el-button>
                <el-button type="success" @click="onAdd">新建</el-button>
                <el-button type="info" @click="onReset">重置</el-button>
              </el-col>
            </div>
          </el-col>
        </el-row>
      </el-header>
      <!-- 表格 -->
      <el-main>
        <!-- 新建弹出框 -->
        <el-dialog title="新建" :visible.sync="AddVisible" width="60%" :before-close="AddClose">
          <div id="drom_up">
            <div>
              <p>房产信息</p>
              <el-main>
                <el-row :gutter="22">
                  <el-col :span="10" :offset="1">
                    <div class="grid-content bg-purple">
                      <el-form ref="form" :model="floor" label-width="100px">
                        <el-form-item label="业主姓名：" required>
                          <el-input v-model="floor.xm"></el-input>
                        </el-form-item>
                        <el-form-item label="所属楼栋：" required class="drom">
                          <el-select v-model="floor.ld" placeholder="请选择">
                            <el-option v-for="(v,i) in ldDate" :label="v" :value="v" :key="i">{{v}}</el-option>
                          </el-select>
                        </el-form-item>
                        <el-form-item label="房号：" required>
                          <el-input v-model="floor.fh"></el-input>
                        </el-form-item>
                        <div id="area">
                          <span> 面积：</span>
                          <el-input-number v-model="floor.mj" controls-position="right" :min="120" :max="400">
                          </el-input-number>平方米
                        </div>
                      </el-form>
                    </div>
                  </el-col>
                  <el-col :span="10" :offset="1">
                    <div class="grid-content bg-purple">
                      <el-form ref="form" :model="floor" label-width="100px">
                        <el-form-item label="所属单元：" required>
                          <el-select v-model="floor.dy" placeholder="请选择" class="drom">
                            <el-option v-for="(v,i) in dyDate" :label="v" :value="v" :key="i">{{v}}</el-option>
                          </el-select>
                        </el-form-item>
                        <el-form-item label="业务类型：" required>
                          <el-select v-model="floor.lx" placeholder="请选择" class="drom">
                            <el-option v-for="(v,i) in lxDte" :label="v" :value="v" :key="i">{{v}}</el-option>
                          </el-select>
                        </el-form-item>
                        <el-form-item label="户型：" required>
                          <el-select v-model="floor.hx" placeholder="请选择" class="drom">
                            <el-option v-for="(v,i) in hxDate" :label="v" :value="v" :key="i">{{v}}</el-option>
                          </el-select>
                        </el-form-item>
                        <el-form-item label="状态：" required>
                          <el-select v-model="floor.zt" placeholder="请选择" class="drom">
                            <el-option v-for="(v,i) in ztDate" :label="v" :value="v" :key="i">{{v}}</el-option>
                          </el-select>
                        </el-form-item>
                      </el-form>
                    </div>
                  </el-col>
                </el-row>
              </el-main>
            </div>
            <div>
              <el-row :gutter="22">
                <el-col :span="6" :offset="10">
                  <div class="grid-content bg-purple">
                    <span slot="footer" class="dialog-footer">
                      <el-button @click="AddVisible = false">取 消</el-button>
                      <el-button type="primary" @click="addSuccessful">新建</el-button>
                    </span>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-dialog>
        <!-- 修改弹框 -->
        <el-dialog title="修改" :visible.sync="ModifyVisible" width="60%" :before-close="ModifyClose">
          <div id="drom_up">
            <div>
              <el-main>
                <el-row :gutter="22">
                  <el-col :span="10" :offset="1">
                    <div class="grid-content bg-purple">
                      <el-form ref="form" :model="Modifytable" label-width="100px">
                        <el-form-item label="业主姓名：">
                          <el-input v-model="Modifytable.floor_xm"></el-input>
                        </el-form-item>
                        <el-form-item label="所属楼栋：" class="drom">
                          <el-input v-model="Modifytable.floor_ld" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="房号：">
                          <el-input v-model="Modifytable.floor_fh" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="面积：">
                          <el-input v-model="Modifytable.floor_mj" disabled></el-input>
                        </el-form-item>
                      </el-form>
                    </div>
                  </el-col>
                  <el-col :span="10" :offset="1">
                    <div class="grid-content bg-purple">
                      <el-form ref="form" :model="Modifytable" label-width="100px">
                        <el-form-item label="所属单元：">
                          <el-input v-model="Modifytable.floor_dy" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="业务类型：">
                          <el-input v-model="Modifytable.floor_lx" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="户型：">
                          <el-input v-model="Modifytable.floor_hx" disabled></el-input>
                        </el-form-item>
                        <el-form-item label="状态：">
                          <el-select v-model="Modifytable.floor_zt" placeholder="请选择单元" class="drom">
                            <el-option v-for="(v,i) in ztDate" :label="v" :value="v" :key="i">{{v}}</el-option>
                          </el-select>
                        </el-form-item>
                      </el-form>
                    </div>
                  </el-col>
                </el-row>
              </el-main>
            </div>
            <div>
              <el-row :gutter="22">
                <el-col :span="6" :offset="10">
                  <div class="grid-content bg-purple">
                    <span slot="footer" class="dialog-footer">
                      <el-button @click="ModifyVisible = false">取 消</el-button>
                      <el-button type="primary" @click="ModifySuccessful">确 定</el-button>
                    </span>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-dialog>
        <!-- 表格 -->
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="floor_id" label="序号" width="120">
          </el-table-column>
          <el-table-column prop="floor_ld" label="楼栋" width="120">
          </el-table-column>
          <el-table-column prop="floor_dy" label="单元" width="120">
          </el-table-column>
          <el-table-column prop="floor_fh" label="房号" width="140">
          </el-table-column>
          <el-table-column prop="floor_mj" label="面积" width="140">
          </el-table-column>
          <el-table-column prop="floor_hx" label="户型" width="140">
          </el-table-column>
          <el-table-column prop="floor_xm" label="业主姓名" width="140">
          </el-table-column>
          <el-table-column prop="floor_lx" label="物业类型" width="140">
          </el-table-column>
          <el-table-column prop="floor_zt" label="状态" width="140">
          </el-table-column>
          <el-table-column prop="operation" label="操作">
            <template slot-scope="scope">
              <el-button @click="onDel(scope.row)" type="text">删除</el-button>
              <el-button @click="Modify(scope.row)" type="text">修改</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <!-- 删除弹框 -->
      <el-dialog title="删除" :visible.sync="delVisible" width="30%" :before-close="handleClose">
        <span>确定删除这条数据吗？</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="delVisible = false">取 消</el-button>
          <el-button type="primary" @click="Delete">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 页码 -->
      <el-footer>
        <page class="page"></page>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import page from '../../components/page.vue';
import Event from '../../utils/Event.js'
export default {
  components: { page },
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      // 传给接收分页的数组
      tableData: [],
      // 将请求来的数据放入数组中
      toltable: [],
      AddVisible: false,
      ModifyVisible: false,
      delVisible: false,
      // 修改数组
      Modifytable: {
        floor_xm: '',
        floor_ld: '',
        floor_hx: '',
        floor_fh: '',
        floor_mj: '',
        floor_dy: '',
        floor_lx: '',
        floor_hx: '',
        floor_zt: '',
      },
      // 添加的数组
      floor: {
        xm: '',
        ld: '',
        fh: '',
        mj: '',
        dy: '',
        lx: '',
        hx: '',
        zt: '',
      },
      // 删除数组
      delDate: [],
      audit: {
        floor_xm: '',
        floor_ld: '',
        floor_dy: '',
      },
      //下拉框楼栋数组
      ldDate: [],
      dyDate: [],
      hxDate: [],
      ztDate: [],
      lxDte: [],
    };
  },
  methods: {
    // 查询
    onSubmit() {
      for (let j in this.audit) {
        if (this.audit[j].trim()) {
          let arr = this.toltable.filter((i) => {
            return i[j].indexOf(this.audit[j]) != -1
          })
          Event.$emit('noticeData', arr)
        }
      }
    },
    // 重置
    onReset() {
      this.audit = {}
      this.getuer()
    },
    // 点击新建弹框出现
    onAdd() {
      this.AddVisible = true;
    },
    // 点击确定新建成功
    addSuccessful() {
      this.$axios({
        url: '/floor/add',
        method: 'post',
        data: {
          xm: this.floor.xm,
          ld: this.floor.ld,
          fh: this.floor.fh,
          mj: this.floor.mj,
          dy: this.floor.dy,
          lx: this.floor.lx,
          hx: this.floor.hx,
          zt: this.floor.zt
        }
      }).then((res) => {
        if (res.data.code == 200) {
          this.$message({ message: '添加成功', type: 'success' })
          this.AddVisible = false;
          this.getuer();
          this.floor = {
            xm: '',
            ld: '',
            fh: '',
            mj: '',
            dy: '',
            lx: '',
            hx: '',
            zt: '',
          }
        }
      })
    },
    AddClose(doen) {
      this.$confirm('确认关闭？', {
        callback: (action, instance) => {
          //当点击关闭时
          if (action == 'confirm') {
            this.AddVisible = false;
            // 当点击取消时
          } else if (action == 'cancel') {
            this.AddVisible = true;
          }
        },
      });
    },
    // 
    onDel(data) {
      this.delVisible = true;
      this.delDate = { ...data }
    },
    // 删除
    Delete() {
      this.$axios({
        url: '/floor/del',
        method: 'post',
        data: {
          fh: this.delDate.floor_fh
        }
      }).then((res) => {
        if (res.data.code == 200) {
          this.$message({ message: '删除成功', type: 'success' });
          this.getuer();
          this.delVisible = false
        }
      })
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => { });
    },
    // 点击修改，弹框出现
    Modify(data) {
      this.ModifyVisible = true
      this.Modifytable = { ...data }
    },
    ModifyClose(data) {
      this.$confirm('确认关闭？', {
        callback: (action, instance) => {
          //当点击关闭时
          if (action == 'confirm') {
            this.ModifyVisible = false;
            // 当点击取消时
          } else if (action == 'cancel') {
            this.ModifyVisible = true;
          }
        },
      });


    },
    // 点击确定修改
    ModifySuccessful() {
      let ModifyArr = [];
      for (let i in this.Modifytable) {
        ModifyArr.push(i, this.Modifytable[i])
      }
      ModifyArr.splice(0, 2)
      this.$axios({
        url: '/floor/edit',
        method: 'post',
        data: {
          data: ModifyArr,
          fh: this.Modifytable.floor_fh
        }
      }).then((res) => {
        if (res.data.code == 200) {
          this.$message({ message: '修改成功', type: 'success' })
          this.ModifyVisible = false;
          this.getuer()
        }
      })
    },
    // 将调用的数据放进toltable数组中
    getuer() {
      this.$axios({
        url: '/floor/sel',
        method: 'get',
      }).then((res) => {
        Event.$emit('table', res.data.data)
        this.toltable = res.data.data
        for (let i = 0; i < this.toltable.length; i++) {
          // 楼栋
          this.ldDate.push(this.toltable[i].floor_ld)
          this.ldDate = [...new Set(this.ldDate)]
          // 单元
          this.dyDate.push(this.toltable[i].floor_dy)
          this.dyDate = [...new Set(this.dyDate)]
          //户型
          this.hxDate.push(this.toltable[i].floor_hx)
          this.hxDate = [...new Set(this.hxDate)]
          // 状态
          this.ztDate.push(this.toltable[i].floor_zt)
          this.ztDate = [...new Set(this.ztDate)]
          // 类型
          this.lxDte.push(this.toltable[i].floor_lx)
          this.lxDte = [...new Set(this.lxDte)]
        }
      })
    },
    receive() {
      Event.$on('tableData', v => {
        this.tableData = v.tableData
      })
    }
  },
  // 页面加载时调用一次数据
  created() {
    this.inputarr = this.tableData
    this.getuer()
  },
  // 挂载后
  mounted() {
    this.receive()
  },
  // 数据更新前
  beforeUpdate() {
    this.receive()
  }
};
</script>

<style scoped lang="less">
#loudong {
  padding: 50px;
  height: 100%;
  .el-header {
    .el-input {
      width: 200px;
    }
  }
}
#loudong .el-input {
  width: 80%;
  margin-bottom: 10px;
}
#loudong .el-main {
  margin-bottom: 30px;
}
#p {
  height: 30px;
}
.el-tree {
  margin-top: 25px;
}
.el-button {
  margin-left: 10px;
}
#submit {
  .el-select {
    width: 200px;
  }
}
.el-icon-plus {
  margin-left: 30px;
}
.el-select {
  width: 303px;
}
#area {
  margin-left: 38px;
  span {
    margin-right: 20px;
  }
}
#drom_up {
  p {
    font-weight: bolder;
  }
}
#drom_up .el-select {
  width: 300px;
}
#drom_up .el-input {
  width: 300px;
}
.el-button-group {
  height: 40px;
  line-height: 40px;
}
.page {
  text-align: center;
}
</style>